<template>
	<div>
		<div class="manage">
			<div class="top">
				<h2>页面管理</h2>
				<span><a-input-search
      					placeholder="广告名称"
      					@search="onSearch"
      					style="width: 200px;"
      					enterButton
    			/></span>
			</div>
		</div>
		<div class="pagelist">
			<div class="addpage" @click="toAdd" v-if="listButton.addition">
				<span><a-icon type="plus"/>新增页面</span>
			</div>
			<div class="pageinf" v-for="(v,i) in list" :key="i">
				<div class="pagetop">
					<h3>{{v.title}}</h3>
					<p>{{v.url}}</p>
				</div>
				<div class="pagebtn">
					<span class="btn" @click="toRedact(v)" v-if="listButton.editor">{{listButton.editor}}</span>
					<span class="btn alter" @click="del(v)" v-if="listButton.cancel">{{listButton.cancel}}</span>
				</div>
			</div>
		</div>
		<a-pagination class="page" showQuickJumper  :defaultCurrent="1" :total="total" @change="onchange" />
	</div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      par: {
        limit: 8,
        pageSize: 1,
        title: ""
      },
      total: 0,
      listButton:{
        addition:"",//添加
        editor:"",//编辑
        cancel:""//删除
      }//按钮数据
    };
  },
  created() {
    let titleName=sessionStorage.getItem("stairH1");
    this.$ajax.get("/kmd-field-web/admin/queryBtn",{params:{"title":titleName.trim()}}).then(res=>{
      for(var i=0;i<res.data.list.length;i++){
        if(res.data.list[i].title=="添加"){
          this.listButton.addition=res.data.list[i].title
        }
        if(res.data.list[i].title=="编辑"){
          this.listButton.editor=res.data.list[i].title
        }
        if(res.data.list[i].title=="删除"){
          this.listButton.cancel=res.data.list[i].title
        }
      }
    })
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.$ajax
        .get("/kmd-field-web/adm/listPage", {
          params: this.par
        })
        .then(res => {
          //					console.log(res)
          this.list = res.data.records;
          this.total = res.data.total;
        });
    },
    //跳转页码
    onchange(pageNumber) {
      this.par.pageSize = pageNumber;
      this.getData();
    },
    //搜索
    onSearch(value) {
      this.par.title = value;
      this.getData();
    },
    //删除页面
    del(v) {
      let that = this;
      this.$confirm({
        title: "操作确认",
        content: "你确定要删除该活动页面吗？",
        onOk: () => {
          that.$ajax
            .get("/kmd-field-web/adm/deletePage", {
              params: {
                pageId: v.id
              }
            })
            .then(res => {
              if (res.data.statusCode == 200) {
                that.$message.success('删除成功!')
                this.getData();
              } else {
                that.$message.error(res.data.message);
              }
            })
            .catch(error=>{
              that.$message.error('服务器繁忙,请稍后重试!');
            })
        },
      });
    },
    //跳转到新增页面
    toAdd() {
      this.$router.push({
        path: "/addPage",
        name: "addPage"
      });
    },
    //跳转到编辑页面
    toRedact(v) {
      this.$router.push({
        path: "/redactPage",
        name: "redactPage",
        params: {
          id: v.id
        }
      });
    }
  }
};
</script>

<style scoped>
.manage {
  padding: 24px;
  background: #fff;
  border-radius: 5px;
}
.pagelist {
  padding: 0 30px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.addpage {
  cursor: pointer;
  margin-top: 20px;
  width: 30%;
  height: 230px;
  border: 5px dashed rgb(233, 233, 233);
  border-radius: 6px;
  text-align: center;
  line-height: 230px;
  font-size: 18px;
  color: rgb(137, 138, 140);
  margin-left: 30px;
}

.pageinf {
  margin-left: 30px;
  margin-top: 20px;
  width: 30%;
  height: 230px;
  float: left;
  background: white;
  border: 3px solid rgb(233, 233, 233);
  border-radius: 6px;
}

.pagetop {
  height: 170px;
  box-sizing: border-box;
  padding: 24px;
}

.pagetop h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.pagetop p {
  font-size: 16px;
}

.pagebtn {
  background: rgb(247, 249, 250);
  border-top: 1px solid #cccccc;
  height: 55px;
  display: flex;
}

.pagebtn .btn {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 55px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.alter {
  border-left: 1px solid #ccc;
  box-sizing: border-box;
  color: blue;
}

.top {
  overflow: hidden;
}

.top h2 {
  float: left;
}

.top span {
  float: right;
  line-height: 32px;
}
</style>
